<template>
  <!-- 登录页面 -->
  <div>
    <div class="logo-wrap w">
      <router-link to="/" style="display: flex; align-items: center;">
        <img style="width: 50px;margin-top: -5px;margin-right: 5px;" src="../../static/img/logo.png"
          class="logo-wrap-img" />
        <div style="font-size: 24px;color: black;font-weight: 800;">优趣联盟</div>
      </router-link>

      <!-- <p>欢迎登录</p> -->
    </div>
    <div class="container-wrap">
      <img src="../../static/img/5e5b07e623de3.jpg" class="container-bg" alt="" />
      <LoginBlock />
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store';
import { mapActions } from 'vuex';
import LoginBlock from "@/components/authentication/Login"
export default {
  name: 'Login',
    metaInfo:{
      title: '优趣联盟系统',
  },
  data () {
    return {
      formDate: {
        username: '',
        password: ''
      },
      ruleInline: {
        username: [
          { required: true, message: '请输入手机号', trigger: 'blur',  transform(value) {
            return value.trim();
          },}
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { type: 'string', min: 6, message: '密码不能少于6位', trigger: 'blur' }
        ]
      }
    };
  },
  components:{
    LoginBlock
  },
  methods: {
    ...mapActions(['login']),
    handleSubmit (name) {
        const {formDate:{username:phone,password}} = this
        if(!phone){
         return this.$Message.error('请输入手机号')
        }
        if(!phone.match(/^1[3456789]\d{9}$/)){
            return this.$Message.error('请正确的手机号')
        }
      this.login({phone,password})
    }
  },
  store
};
</script>

<style lang="scss" scoped>
.footer {
  background-color: #f4f4f4 !important;
}

.container {
  &-wrap {
    width: 100%;
    margin: 0 auto;
    height: 545px;
    position: relative;
    overflow: hidden;
  }

  &-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

.login-container {
  position: absolute;
  right: 200px;
}

.logo {
  &-wrap {
    padding: 10px 0
  }

  &-img {
    width: 150px
  }

}

.form {
  &-box {
    padding: 40px 50px;
    margin: 20px auto;
    background-color: #Fff;
  }
}

.main-btn {
  height: 50px;
  background-color: #e2231a;
  border-radius: 0;
}

.bottom {
  text-align: center;
  color: #bcbcbc;

  &-link {
    color: #e2231a;
  }
}</style>
